<template>
  <el-row type="flex" justify="center">
    <el-col :span="23">
      <el-form :model="formInline" size="small">
<!--        <el-form-item label="服务名称">-->
<!--          <span>{{$route.query.name}}</span>-->
<!--        </el-form-item>-->
        <el-form-item label="授权方式">
          <el-radio-group v-model="formInline.value1" @change="getData">
            <el-radio label="1">角色授权</el-radio>
            <el-radio label="2">账号授权</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-transfer
                  filterable
                  filter-placeholder="关键词"
                  :titles="['未授权', '已授权']"
                  v-model="value1"
                  :data="generateData">
          </el-transfer>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clickOk">确认授权</el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>/**
 *{ 授权管理 }
 * @param:
 * @author: 宋康
 * @DateTime: 2022/7/5
 */
  import {queryUser} from "@/api/oneseIf-centre";

  export default {
    name: "ServiceManageAuthorization",
    data() {
      return {
        id : this.$route.query.id,
        formInline: {
          value1: '1',
        },
        value1: [],
        generateData: []
      }
    },
    methods: {
      /**
       *{ 获取数据 }
       * @param:
       * @author: 宋康
       * @DateTime: 2022/7/6
       */
      getData() {
        switch (this.formInline.value1) {
          case '1':
            this.value1 = [3,4]
            this.generateData = [
              {label: '角色1', key: 1},
              {label: '角色2', key: 2},
              {label: '角色3', key: 3},
              {label: '角色4', key: 4}
            ]
            break;
          case '2':
            this.value1 = [4]
            this.generateData = [
              {label: '账号1', key: 1},
              {label: '账号2', key: 2},
              {label: '账号3', key: 3},
              {label: '账号4', key: 4}
            ]
            break;
        }
      },
      /**
       *{ 确认授权 }
       * @param:
       * @author: 宋康
       * @DateTime: 2022/7/6
       */
      clickOk() {
        if(this.formInline.value1 == 1){
          alert(1);
        }else if(this.formInline.value1 == 2){
          alert(2);
        }
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
      },
      /**
       * 查询角色和用户列表
       * @param id
       */
      query(id){
        queryUserPower()
      }
    },
    mounted() {
      this.getData();
      this.query(this.id);
    }
  }
</script>

<style lang="scss" scoped>

</style>
